<template>
  <div>
    <section>
      <div class="section-header">{{ header }}供应商报工</div>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item class="col-input-2" label="节点报工" prop="projectNo">
            <a-input v-model="form.hatchProjectName" />
            <a-input v-model="form.hatchProjectName" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item ref="projectRealName" label="实际完成日期" prop="projectRealName">
            <a-date-picker valueFormat="YYYY-MM-DD"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item ref="projectName" label="预计完成日期" prop="projectName">
            <a-date-picker valueFormat="YYYY-MM-DD"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item class="col-input-2" label="工期状态" prop="projectNo">
            <a-input v-model="form.hatchProjectName" />
            <a-input v-model="form.hatchProjectName" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item ref="projectRealName" label="逾期责任方" prop="projectRealName">
            <a-select default-value="合同报工">
              <a-select-option value="合同报工"> 合同报工 </a-select-option>
              <a-select-option value="合同报工2"> 合同报工 2 </a-select-option>
              <a-select-option value="合同报工3"> 合同报工 3 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item ref="projectRealName" label="逾期具体原因" prop="projectRealName">
            <a-input v-model="form.lastProjectNo" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 甲方 -->
      <slot name="PartyA"></slot>
      <!-- 乙方 -->
      <slot name="PartyB"></slot>
      <div class="section-table">
        <a-button class="hte-btn add-btn" type="primary" icon="plus">新增附件</a-button>
        <div>
          <a-table
            class="hte-table-content"
            :columns="reservationColumns"
            :data-source="reservationData"
            :pagination="pagination"
            :loading="tabLoading"
            bordered
            size="middle"
            @change="pageChange"
          >
            <span slot="taskTotal" slot-scope="text">
              <i :class="{ succfont: text > 5 }">{{ text }}</i>
            </span>
            <template slot="toAudit" slot-scope="text, record, index">
              <a-button type="primary" size="small" @click="handledDelFile(record)">删除</a-button>
              <ht-upload
                ref="myUpload"
                class="upload-demo"
                multiple
                dbKey="Trd"
                busField="workReport"
                busType="work_report_attach_b"
                :busKey="record.id + ''"
                ftpKey="ftp"
                v-model="fileList"
                :show-file-list="false"
                :before-upload="beforUpload(index)"
                :on-success="afterUpload"
              >
                <a-button  size="small" @click="beforUpload(index)"> 上传 </a-button>
              </ht-upload>
            </template>
          </a-table>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import '@/config/upload.install.js'
export default {
  name: 'ReportInfoTemp',
  props: {
    header: {
      type: String,
      default: '甲方',
      required: true,
    },
  },
  data() {
    return {
      form: {
        id: '',
        projectClass: '10',
        projectNo: '',
        projectName: '',
        mainDeptName: '',
        projectTypeSubCategory: '',
        hatchProjectId: '',
        hatchProjectNo: '',
        hatchProjectName: '',
        lastProjectNo: '',
        lastProjectName: '',
        keywords: '',
        highTechType: '',
        isHighTechProject: false,
        isHighTechProjectText: '',
        projectContent: '',
        projectUseFor: '',
        isNeedEngineeringMotion: null,
        motionProjectNameOrNo: '',
        functionAndPerformance: '',
        sourceBefore: '',
        technologyTarget: '',
        economyTarget: '',
        name: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      rules: {},
      reservationColumns: [
        {
          title: '附件名称',
          dataIndex: 'taskTotal',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'taskTotal' },
        },
        {
          title: '文件大小',
          dataIndex: 'teamName',
          width: '20%',
          align: 'center',
        },
        {
          title: '上传人',
          dataIndex: 'completedTotal',
          width: '20%',
          align: 'center',
        },
        {
          title: '上传时间',
          dataIndex: 'incompletedTotal',
          width: '20%',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'delayTotal',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'toAudit' },
        },
      ],
      reservationData: [{ key: 1, id: 1 }],
      selectedRowKeys: [],
      pagination: {
        total: 0,
        current: 1,
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      fileList: [],
    }
  },
  mounted() {},
  methods: {
    pageChange() {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
    },
    handledDelFile(item) {},
    beforUpload() {},
    afterUpload() {},
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
/deep/ .upload-demo{display: inline-block;margin-left: 10px;}
</style>
